<template>
  <el-dialog
    v-if="dialogVisible"
    v-model="dialogVisible"
    title="法兰信息"
    width="550px"
    draggable
    append-to-body
    @close="handleClose"
    :close-on-click-modal="false"
    class="px-40px"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="法兰ID" prop="frangeId">
        <el-input v-model="form.frangeId" placeholder="请输入法兰id" />
      </el-form-item>

      <!-- <el-form-item label="法兰名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入法兰名称" />
      </el-form-item>

      <el-form-item label="法兰规格" prop="specification">
        <el-input v-model="form.specification" placeholder="请输入法兰规格" />
      </el-form-item>

      <el-form-item label="压力等级" prop="pressureLevel">
        <el-input v-model="form.pressureLevel" placeholder="请输入压力等级" />
      </el-form-item>

      <el-form-item label="垫片名称" prop="gasketName">
        <el-input v-model="form.gasketName" placeholder="请输入垫片名称" />
      </el-form-item>

      <el-form-item label="垫片规格" prop="gasketSpec">
        <el-input v-model="form.gasketSpec" placeholder="请输入垫片规格" />
      </el-form-item>

      <el-form-item label="螺栓规格" prop="boltSpec">
        <el-input v-model="form.boltSpec" placeholder="请输入螺栓规格" />
      </el-form-item>

      <el-form-item label="推荐载荷" prop="recommendedLoad">
        <el-input v-model="form.boltSpec" placeholder="请输入推荐载荷" />
      </el-form-item>

      <el-form-item label="法兰位置" prop="position">
        <el-input v-model="form.position" placeholder="请输入法兰位置" />
      </el-form-item>

      <el-form-item label="法兰二维码" prop="qrCode">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handleQRCodeChange"
          accept="image/*"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          <template #tip>
            <div class="el-upload__tip">只能上传 jpg/png 文件</div>
          </template>
        </el-upload>
      </el-form-item> -->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// 引入所需的组件和方法
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElButton,
  ElUpload,
  ElIcon,
} from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { ref, reactive, watch, defineProps, onMounted } from "vue";

const props = defineProps({
  // 定义传递给子组件的属性
  show: false,
  value: "{}",
});

const dialogVisible = ref(false);
const formRef = ref();

const form = reactive({
  frangeId: "",
  // name: "",
  // specification: "",
  // pressureLevel: "",
  // gasketName: "",
  // gasketSpec: "",
  // boltSpec: "",
  // recommendedLoad: 0,
  // position: "",
  // qrCode: null,
});

const rules = {
  frangeId: [{ required: true, message: "请输入法兰id", trigger: "blur" }],
  name: [{ required: true, message: "请输入法兰名称", trigger: "blur" }],
  specification: [
    { required: true, message: "请输入法兰规格", trigger: "blur" },
  ],
  pressureLevel: [
    { required: true, message: "请输入压力等级", trigger: "blur" },
  ],
  gasketName: [{ required: true, message: "请输入垫片名称", trigger: "blur" }],
  gasketSpec: [{ required: true, message: "请输入垫片规格", trigger: "blur" }],
  boltSpec: [{ required: true, message: "请输入螺栓规格", trigger: "blur" }],
  recommendedLoad: [
    { required: true, message: "请输入推荐载荷", trigger: "blur" },
  ],
  position: [{ required: true, message: "请输入法兰位置", trigger: "blur" }],
  qrCode: [{ required: true, message: "请上传法兰二维码", trigger: "change" }],
};

const imageUrl = ref("");

const emits = defineEmits(["update:show", "update:value"]);

watch(
  () => props.show,
  (val) => {
    dialogVisible.value = val;
  }
);
watch(
  () => dialogVisible.value,
  (val) => {
    if (val !== props.show) {
      emits("update:show", val);
    }
    if (val && props.value) {
      console.log("userDataPanel数据：", props.value);
      try {
        const jsonVal = JSON.parse(props.value);

        //如果传过来的数据不是对象，则直接返回

        Object.keys(jsonVal).forEach((key) => {
          console.log(jsonVal[key]);
          if (form.hasOwnProperty(key)) {
            form[key] = jsonVal[key] || "";
          }
        });
      } catch (error) {
        console.error("解析userDataPanel数据失败：", error);
      }
    }
  }
);

const handleQRCodeChange = (file) => {
  form.qrCode = file.raw;
  imageUrl.value = URL.createObjectURL(file.raw);
};
const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    // TODO: 在这里处理表单提交逻辑
    console.log("表单数据：", form);

    emits("update:value", JSON.stringify(form));
    handleClose();
  } catch (error) {
    console.error("表单验证失败：", error);
  }
};

const handleClose = () => {
  emits("update:show", false);
  // dialogVisible.value = false;
  formRef.value?.resetFields();
  formRef.value?.clearValidate();
};
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
:deep(.avatar-uploader) {
  text-align: center;
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .el-upload {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.2s;
    &:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
  }
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}
</style>
